<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <style>
            #loginForm {
                background-color: #ADD8E6;
                width: 300px;
                margin: 200px auto;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }
            #loginForm h1 {
                text-align: center;
            }
            #loginForm div {
                margin-bottom: 10px;
            }
            #loginForm input {
                width: 100%;
                padding: 8px;
                box-sizing: border-box;
            }
            #loginForm button {
                width: 100%;
                padding: 10px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            #loginForm button:hover {
                background-color: #45a049;
            }
        </style>	
	</head>
	<body>
		<div id="app">
			<div id="loginForm" v-if="!isLogin">
				<h1>用户登录</h1>
				<div>用户名:<input type="text" v-model="yhm" /></div>
					<div>密码:<input type="password" v-model="mm" /></div>
				<div><button v-on:click="login">登录</button></div>
			</div>
		
		<div v-else>
			<a href="学生信息管理.html">学生信息管理页</a>&nbsp;
			<div><button @click="loginOut">登出</button></div>
		</div>
		</div>
		<script>
    var app = Vue.createApp({
        data() {
            return {
                yhm: '',
                mm: '',
                isLogin: false
            }
        },
        methods: {
            login: function () {
                console.log("login");
                if (this.yhm == "admin" && this.mm == "123456") {
                    alert("登录成功");
                    this.isLogin = true;
                } else {
                    alert("登录失败，请检查用户名和密码");
                }
            },
            loginOut: function () {
                this.isLogin = false;
            }
        }
    });

    var vm = app.mount("#app");
		</script>
	</body>
</html>
